<template>
  <div>
    <div class="search_box radus, topSelect">
      <div class="searchBox1" style="margin-left: 20px">
         <el-button  size="small" plain  icon="el-icon-search" id="keyDownSearch" @click="getOrder()">查询</el-button>
      </div>
      <div class="[more]" v-if="!ismOrpc" @click="showMore"><i class="more? 'el-icon-arrow-down':'el-icon-arrow-up'"></i> {{more? '收起':'更多筛选'}}</div>
       
    </div>
    <Panel title="全部订单" :intro='intro'>
        <div slot='ext' class="examine">
          <form :action="port.url" method="POST" target="targetIfr">
          <button v-has="{action: 'export:order', effect: 'move'}" v-if="ismOrpc" type="submit"   class="export"> <i class="el-icon-upload"></i>导出数据</button>
         </form>
         <iframe name="targetIfr" style="display:none"></iframe> 
        </div>
    <TableEncapsulation
      slot="body"
      :tableConfig="tableConfig"
      :tableData="tableData"
    >
    <template slot="operation" slot-scope="operation">
          <el-button size="mini" icon="el-icon-info"
            v-has="{action: 'order:third:info', effect: 'move'}"
            @click="()=>commentDetail(operation.row)"
          >详情</el-button>
        </template>
        <TablePager
          slot="pager"
          v-if="pager.use"
          :size="pager.size"
          :pageChange="pageChange"
          :show-total="pager.showTotal"
          :total="pager.total"
          :current="pager.current"
        >
          <span class="demonstration">GO></span>
        </TablePager>
    </TableEncapsulation>
    </Panel>

    <ModalPanel 
      :visible='infoShow'
      title="订单详情"
      :onCancel="infoCancel"
      class="bannerDialog"
      :showFooter="false"
      :onOk="onSubmit">
      <div>
        <div class="infoshow">
          <div class="users">
              <el-row>
                <el-col :span="24">
                  <el-card class="box-card">
                    <div class="out-box1">
                      <div class="band-title">
                        <div class="line"></div>
                        <div>基本信息</div>
                      </div>
                      <div class="btn-box">
                        <div class="btn-item">
                          <p class="inco-title">电量：</p>
                          <p>12.89度</p>
                        </div>
                        <div class="btn-item">
                          <p class="inco-title">结算电费：</p>
                          <p>12.89元</p>
                        </div>
                        <div class="btn-item">
                          <p class="inco-title">结算服务费：</p>
                          <p>12.89元</p>
                        </div>
                        <div class="btn-item1">
                          <p class="inco-title">时间：</p>
                          <p>2025/05/04 12:12:02至2025/05/04 14:14:23</p>
                        </div>
                        <div class="btn-item"></div>
                      </div>
                      <div>
                        <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
                          <el-tab-pane label="电流电压" name="first">
                            asdasdas
                          </el-tab-pane>
                        </el-tabs>
                      </div>
                    </div>
                    <div class="out-box1">
                      <div class="band-title">
                        <div class="line"></div>
                        <div>收费详情</div>
                      </div>
                      <div >
                          <el-table
                            :data="orderRateData"
                            style="width: 100%">
                            <el-table-column
                              prop="date"
                              label="时段"
                              width="180">
                            </el-table-column>
                            <el-table-column
                              prop="name"
                              label="电费单价"
                              width="180">
                            </el-table-column>
                            <el-table-column
                              prop="address"
                              label="服务费单价">
                            </el-table-column>
                            <el-table-column
                              prop="name"
                              label="合计电费"
                              width="180">
                            </el-table-column>
                            <el-table-column
                              prop="address"
                              label="合计服务费">
                            </el-table-column>
                          </el-table>
                      </div>
                    </div>
                  </el-card>
                </el-col>
              </el-row>
          </div>
        </div>
      </div>
    </ModalPanel>
  </div>
</template>
<script>
import request from "@/tools/request";
import Panel from "@/components/Panel";
import TableEncapsulation from "@/components/TableEncapsulation";
import TablePager from "@/components/Pager";
import SearchInput from "@/components/SearchInput";
import { objectFilter } from "@/tools/array";
import { dateFormat } from "@/tools/time";
import ModalPanel from "@/components/ModalPanel";
export default {
  name: "orderIndex",
  components: {
    TableEncapsulation,
    TablePager,
    Panel,
    SearchInput,
    ModalPanel,
  },
  data() {
    return {
      intro:{
        title: '全部订单-介绍文档',
        content:`<ul><li>全部订单包括 微信小程序订单和第三方平台订单、私人桩订单</li></ul><p><br></p><ul><li>注意：</li></ul><ol><li class="ql-indent-1">第三方订单中，快电不返回用户手机号，如需联系用户请在操作中点击‘查询手机号’。</li></ol><ul><li>车牌减免失败情况：</li></ul><ol><li class="ql-indent-1">用户输入车牌错误或软件上绑定的车牌与当时充电车辆不符，需要点击‘手动减免车牌’，并输入正确车牌号减免，并提醒用户修改车牌号</li><li class="ql-indent-1">用户车牌正确，但因停车场各种不确定因素导致车牌减免失败，先点击‘车牌减免’，查看是否提示减免成功，若还是无法减免成功，则需要帮助用户与停车场之间沟通放行</li><li class="ql-indent-1">用户减免成功，但是停车超过2小时，则需要缴费出场，收费标准按停车场方规定</li><li class="ql-indent-1">以上情况不包括我公司自建出场闸口。如 ‘武侯万达地面广场充电站’</li></ol><p><br></p><p><br></p>`
      },
      //info
      infoShow: false,
      info: {},
      orderRateData:[],
      activeName: 'first',
      //info
      visible: false,
      modalData: {},
      showPhone: false,
      token: window.localStorage.getItem('token'),
      searchs:{
        url: "https://192.168.1.99:8080/api/export/order"+window.localStorage.getItem('token'),
      },
      port:{
        url: this.$baseUrl+"/export/order?token="+localStorage.getItem('token'),
      },
      editColumn: [
        {    
          name: "车牌号",
          prop: "plate",
          type: "text",
          required: true,
          width: 24
        },
        {
          name: "减免原因",
          prop: "reason",
          type: "select",
          optionBindLabel: 'name',
          optionBindValue: 'id',
          optionList: [{'id': '车牌错误','name': "车牌错误"},{'id':'停车场原因', 'name':"停车场原因"}],
          width:12,
          required: false
        },
        {    
          name: "填写原因",
          prop: "msg",
          type: "text",
          required: false,
          width: 24
        },
      ],
      tableData: [],
      operation: true,
      pager: {
        component: 'orderlist',
        use: true,
        total: 0,
        current: 1,
        size: 10,
        showTotal: true
      },
      pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
        },
    };
  },
  created() {
    this.getOrder()
  },
  mounted(){
    var _this = this       
    document.onkeyDownSearch = function(e) {            
    let key = window.event.keyCode            
    if (key== 13) {
         _this.getOrder()
      }
    }
  },
  computed: {
    ismOrpc() {
			    return this.$store.getters.ismOrpc;
			},
    tableConfig () {
      return {
        selection: false,
        columnConfig: [
          {
            label: "订单号",
            type: "text",
            prop: "chargeOrderNum",
            align: "center"
          },
           {
            label: "用户类型",
            type: "other",
            prop: "clientUserType",
            align: "center",
            fnc: val =>  val == 100 ? "原价用户" : val == 200 ? "普通用户" : val == 300 ? "VIP用户" : val == 400 ? "车队用户":  "互联互通"
          },
          {
            label: "手机号",
            type: "phoneNum",
            prop: "phone",
            align: "center",
            style: 'color: blue; text-decoration: underline;'
          },
          {
            label: "充电量",
            type: "text",
            prop: "totalElecQuantity",
            align: "center",
            width: 70
          },
          {
            label: "结算总费用",
            type: "text",
            prop: "clearingTotalMoney",
            align: "center",
            width: 90
          },
        
           {
            label: "结算状态",
            type: "other",
            prop: "settlement",
            align: "center",
            fnc: val => val ? "已结算" : "未结算" ,
            class:val => val  ? "agree" : "denger-tag" ,
            width: 90
          },
          {
            label: "结束soc",
            type: "text",
            prop: "endSoc",
            align: "center",
            fnc: val => val  ? val+"%" : '',
            width: 70
          },
          {
            label: "订单状态",
            type: "other",
            prop: "state",
            align: "center",
            fnc: val => val == 1 ? "启动中" : val == 2 ? "充电中" : val == 3 ? "停止中" : val == 4 ? "已结束": "未知"
          },
          {
            label: "车牌号",
            type: "text",
            prop: "plateNum",
            align: "center"
          },
          {
            label: "停车减免状态",
            type: "other",
            prop: "parkingReduceState",
            align: "center",
            fnc: val =>  val == 1 ? "未减免" : val == 2 ? "减免成功" : "减免失败"
          },
          {
            label: "减免失败信息",
            type: "text",
            prop: "parkingFailMsg",
            align: "center"
          },
          this.operation && {
            type: "operation",
            align: "center",
            label: "操作",
            width:280
          }
        ].filter(Boolean)
        }
    },
  },

  destroyed(){
    document.onkeyDownSearch = ''
  },
  methods: {
    keyDownSearch(e){
      if(e.keyCode == 13){
        this.getOrder();
      }
    },
    //输入车牌号
    exemption(row){
      this.modalData = {plate: row.plate, id: row.siteId,reason: '车牌错误', oldPlate: row.plate}
      this.visible = true
    },
    onCancel(){
      this.visible = false
    },
    async exportFn(){
      let endTime = this.searchs.appointmentTime ? (dateFormat(this.searchs.appointmentTime[1], "yyyy-MM-dd HH:mm:ss")) : undefined
      let beginTime = this.searchs.appointmentTime ? (dateFormat(this.searchs.appointmentTime[0],"yyyy-MM-dd HH:mm:ss")) : undefined
     this.$http.post(this.$baseUrl+'/export/order', {
        params: {
            endTime: endTime,
            beginTime: beginTime,
        },
        headers: {
          'Content-Type':'application/json',
          'token':localStorage.getItem('token')
        },
      }).then((res) => {
            })
        return
    },
    async getOrder() {
      let current = this.pager.current
      let size = this.pager.size
      let search = objectFilter({size, current })
      const res = await request({
        url: "/manage/charge/order/query",
        method: "POST",
        data: search
      });
      this.tableData = res.data.records
      this.pager.total = res.data.total
      this.pager.current = res.data.current
    },
    pageChange(val, name) {
      this.pager.current = 1;
      this.port[name] = this.searchs[name]
    },
    editStore(id){
      this.$router.push({ path: "/editStore",query:{id:id} })
    },
    commentDetail(row){
      this.info = row
      this.infoShow = true
    },
    infoCancel(){
      this.infoShow = false
    },
    async getRateInfo() {
      let search = objectFilter({size:15, current:1 })
      const res = await request({
        url: "/manage/charge/order/detail/query",
        method: "POST",
        data: search
      });
      this.orderRateData = res.data.records
    },
    handleClick(tab, event) {
        console.log(tab, event);
    }
  }
}
</script>
<style lang='scss' >

.out-box {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  font-size: 15px;
  color: #000000;
  padding: 10px 0;
  font-size: 13px;
}
.out-box1 {
  font-size: 15px;
  color: #000000;
  padding: 10px 0;
}
.sin-box {
  min-width: 48%;
  padding: 8px 0;
  display: flex;
  align-items: center;
}
.names{
  color: rgb(153, 153, 153);
  min-width: 140px;
  text-align: right;
}
.hr-btn {
  margin: 5px auto;
  background: #fff;
  color: #409EFF;
}


.band-title{
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  font-weight: bold;
  font-size: 18px;
  background: gainsboro;
}
.line{
  width: 3px;
  height: 20px;
  border-radius: 2px;
  background: linear-gradient(90deg, #782f13, #bdbaba);
  margin-right: 3px;
}
.btn-box{
  display: flex;
  flex-wrap: wrap;
}
.btn-item {
    // margin-right: 15px;
    width: 26%;
    display: flex;
}
.btn-item1{
  width: 90%;
  display: flex;
}
.inco-title{
  color: gray;
}
.hr-btn1{
  background: #eb6028;
  border: none;
  color: #fff;
}
</style>